<template>
    <div>
        <el-card class="main" shadow="never" :body-style="{ padding: '0px' }">
            <el-row>
                <el-col :xs="12" :sm="6" v-for="(item,index) in 4" :key="index" class="block">
                    <el-image style="width: 100%; height: 100%" :src="urls[index]" fit="fit"/>
                </el-col>
            </el-row>
        </el-card>
    </div>
</template>

<script>
export default {
    data() {
        return {
            h: '',
            h2: '',
            urls: [
                'https://resource.smartisan.com/resource/eca4f286fde41cebb778dc4f8bf055df.jpg',
                'https://resource.smartisan.com/resource/1023fe9691eaf03abbfd261b36df4985.png',
                'https://resource.smartisan.com/resource/33ea4bfa05068e0741b7278fec9da8a6.jpg',
                'https://resource.smartisan.com/resource/fdc4370d1ce14a67fadc35d74209ac0f.jpg',
            ],
        };
    },
    mounted(){
        //  document.body.clientWidth
        const height = document.body.clientHeight;
        this.h = height * 0.65 + 'px';
        this.h2 = height * 0.65 * 0.5 +'px';
    }
}
</script>

<style>
.main {
    border-radius: 8px;
}
.block {
    height: 200px;
    background: #f5f5f5;
    /*
    min-height: 180px;
    max-height: 240px;
    */

}
.block:hover {
   -webkit-box-shadow: #f1f1f1 0px 0px 20px inset;
   -moz-box-shadow: #f1f1f1 0px 0px 20px inset;
   box-shadow: #f1f1f1 0px 0px 20px inset;

}


</style>

